<template>
  <div class="import-history">
    <div class="page-header">
      <h1>导入历史</h1>
      <p class="page-description">
        查看所有Excel导入记录
      </p>
    </div>

    <div class="content">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>导入记录</span>
            <el-button
              type="primary"
              @click="refreshData"
            >
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
          </div>
        </template>

        <el-table
          v-loading="loading"
          :data="importHistory"
          stripe
          style="width: 100%"
        >
          <el-table-column
            prop="filename"
            label="文件名"
            min-width="200"
          >
            <template #default="{ row }">
              <div class="filename-cell">
                <el-icon><Document /></el-icon>
                <span>{{ row.filename }}</span>
              </div>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="type"
            label="类型"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              <el-tag :type="getTypeTagType(row.type)">
                {{ row.type }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="total"
            label="总数"
            width="80"
            align="center"
          />
          
          <el-table-column
            prop="success"
            label="成功"
            width="80"
            align="center"
          >
            <template #default="{ row }">
              <span class="success-count">{{ row.success }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="failed"
            label="失败"
            width="80"
            align="center"
          >
            <template #default="{ row }">
              <span class="failed-count">{{ row.failed }}</span>
            </template>
          </el-table-column>
          
          <el-table-column
            prop="import_time"
            label="导入时间"
            width="180"
          />
          
          <el-table-column
            prop="status"
            label="状态"
            width="100"
            align="center"
          >
            <template #default="{ row }">
              <el-tag :type="getStatusTagType(row.status)">
                {{ getStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column
            label="操作"
            width="120"
            align="center"
          >
            <template #default="{ row }">
              <el-button
                type="primary"
                size="small"
                @click="viewDetails(row)"
              >
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="导入详情"
      width="600px"
    >
      <div
        v-if="selectedItem"
        class="detail-content"
      >
        <el-descriptions
          :column="2"
          border
        >
          <el-descriptions-item label="文件名">
            {{ selectedItem.filename }}
          </el-descriptions-item>
          <el-descriptions-item label="类型">
            <el-tag :type="getTypeTagType(selectedItem.type)">
              {{ selectedItem.type }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="总数">
            {{ selectedItem.total }}
          </el-descriptions-item>
          <el-descriptions-item label="成功">
            <span class="success-count">{{ selectedItem.success }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="失败">
            <span class="failed-count">{{ selectedItem.failed }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="导入时间">
            {{ selectedItem.import_time }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusTagType(selectedItem.status)">
              {{ getStatusText(selectedItem.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="批次ID">
            <code>{{ selectedItem.batch_id }}</code>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh, Document } from '@element-plus/icons-vue'
import { importHistoryApi, type ImportHistoryItem } from '@/api/modules/importHistory'

// 响应式数据
const loading = ref(false)
const importHistory = ref<ImportHistoryItem[]>([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const detailDialogVisible = ref(false)
const selectedItem = ref<ImportHistoryItem | null>(null)

// 加载数据
const loadData = async () => {
  loading.value = true
  try {
    const skip = (currentPage.value - 1) * pageSize.value
    const data = await importHistoryApi.getHistory(skip, pageSize.value)
    importHistory.value = data
    // 注意：这里假设API返回的是当前页的数据，总数需要从其他地方获取
    // 如果API支持返回总数，可以更新total.value
  } catch (error) {
    console.error('Failed to load import history:', error)
    ElMessage.error('加载导入历史失败')
  } finally {
    loading.value = false
  }
}

// 刷新数据
const refreshData = () => {
  loadData()
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadData()
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadData()
}

// 查看详情
const viewDetails = (item: ImportHistoryItem) => {
  selectedItem.value = item
  detailDialogVisible.value = true
}

// 获取类型标签样式
const getTypeTagType = (type: string) => {
  switch (type) {
    case '客户':
      return 'primary'
    case '房源':
      return 'success'
    case '绩效':
      return 'warning'
    default:
      return 'info'
  }
}

// 获取状态标签样式
const getStatusTagType = (status: string) => {
  switch (status) {
    case 'completed':
      return 'success'
    case 'processing':
      return 'warning'
    case 'failed':
      return 'danger'
    default:
      return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'completed':
      return '已完成'
    case 'processing':
      return '处理中'
    case 'failed':
      return '失败'
    default:
      return status
  }
}

// 组件挂载时加载数据
onMounted(() => {
  loadData()
})
</script>

<style scoped>
.import-history {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.page-description {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filename-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.success-count {
  color: #67c23a;
  font-weight: 600;
}

.failed-count {
  color: #f56c6c;
  font-weight: 600;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.detail-content {
  padding: 10px 0;
}

code {
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
}
</style>
